<template>
  <div class="main-tradebox">
    <el-container class="main-container">
      <el-main>
        <div class="container cc_main">
          <!-- 标题栏 -->
          <div class="top_title flex">
            <h3 class="font-24 font-bold">OTC Desk</h3>
            <p class="font-12 pright">持有直布罗陀DLT牌照，支持法币与数字资产大额交易</p>
          </div>
          <!-- 内容部分 -->
          <div class="main_cont flex">
          <div class="main_leftbox">
            <div class="top_coin">
              <ul class="flex font-16">
                <li class="" v-for="(item,index) in currencyList" :key="index"><span class="active">{{item.coin}}</span></li>
                <li>
                    <el-tooltip class="item" effect="dark" content="敬请期待" placement="top-start">
                      <el-button>ETH</el-button>
                    </el-tooltip>
                  </li>
              </ul>
            </div>
            <div class="coin_list">
              <ul class="coin_ul">
                <li class="flex flex-v-center" v-for="(item,index) in coinlist" :key="index" @click="selectLeft(index)" :class="{active:index==ins}">
                  <img  :src="item.logo" alt="" srcset="">
                  <p class="font-16 m-left-30 ">{{item.coin}}</p>
                </li>
              </ul>
            </div>
          </div>

            <div class="main_rightbox">
              <div class="main-righttop">
              <div  class="box_item aotc">
                <el-tabs v-model="activeName" @tab-click="handleClick" >
                  <!-- 我要购买 tab 01 -->
                  <el-tab-pane label="我要购买" name="first">
                    <div class="oc_top">
                      <div class="input_box flex">
                        <p :class='typeBuyval=="1"?"active":""'  @click="typeBuy(1)">按金额购买</p>
                        <p :class='typeBuyval=="2"?"active":""' @click="typeBuy(2)">按数量购买</p>
                      </div>
                      <div class="input_two m-top-10">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline" :rules="rules" >
                          <el-form-item label="">
                            <el-input  :value='coinInfo.buycny' v-model="formInline.buyInput"  :placeholder="minTips" maxlength="10"  min="0">
                                <span  class="unit"  slot="suffix" v-if="typeBuyval=='1'">{{otcareaName}}</span>
                                <span  class="unit"  slot="suffix" v-if="typeBuyval=='2'">{{rightData.coin}}</span>
                              </el-input>
                          </el-form-item>
                          <el-form-item class="m-left-10">
                            <el-button type="warning" @click="onSubmitBuy(val)" >获取报价</el-button>
                          </el-form-item>
                        </el-form>
                      </div>
                      <div>
                    </div>
                    </div>
                  </el-tab-pane>
                  <!-- tab02 我要出售 -->
                  <el-tab-pane label="我要出售" name="second">
                    <div class="input_box flex">
                      <p :class='typeSellval=="1"?"active":""'  @click="typeSell(1)">按金额出售</p>
                      <p :class='typeSellval=="2"?"active":""' @click="typeSell(2)">按数量出售</p>
                    </div>
                    <div class="input_two m-top-10">
                      <el-form :inline="true" :model="formInline" class="demo-form-inline"   >
                        <el-form-item label="">
                          <el-input  :value='coinInfo.buycny' v-model="formInline.sellInput" :placeholder="minTips2" >
                              <span  class="unit"  slot="suffix" v-if="typeSellval=='1'">{{otcareaName}}</span>
                              <span  class="unit"  slot="suffix" v-if="typeSellval=='2'">{{rightData.coin}}</span>
                          </el-input>
                        </el-form-item>
                        <el-form-item class="m-left-10">
                          <el-button type="warning" @click="onSubmitSell(val)">获取报价</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            <!--02 币种信息-价格 -购买 -出售 function  -->
            <div class="buysell_main">
                        <h2 class="title font-20">获取报价</h2>
                        <div class="buysellbox flex flex-v-center">
                          <img src="https://static-hx24.huoxing24.com/coin/icon/BTC.png"  alt="" srcset="">
                          <div class="price m-left-15">
                            <p class="coinprice font-20">{{buyOrderData.buyprice||'0.00'}} {{otcareaName||'--'}}/{{rightData.coin||'--'}} 
                              <el-tooltip class="item" effect="dark" content="提示：该价格为参考价格，最终价格以交易时的价格为准" placement="top-start">
                                <i class="el-icon-question"></i>
                              </el-tooltip>
                            </p>
                            <p class="paymoney" v-show="this.buydisabled==true">请输入金额或数量后获取报价</p>
                            <p class="paymoney" v-show="this.buydisabled==false">支付 {{buyOrderData.allbuyMoney||'0.00'}} {{otcareaName}} 获得 {{buyOrderData.number||'0.00'}} {{rightData.coin}} </p>
                          </div>
                          <div class="buysbtns">
                            <el-button type="success" @click="otcbuyBtn" :disabled="buydisabled">购买 {{rightData.coin}}</el-button>
                          </div>
                        </div>
                      </div>
                </div>      
            <!-- 3个提示信息 -->
                <div class="tipsbox">
                  <ul class="flex">
                    <li>
                      <el-card class="box-card">
                        <div class="tip_info">
                          <h4>价格保障</h4>
                          <p>0手续费，价格优惠</p>
                          <p>深度流通性好，一次性完成大额交易</p>
                        </div>
                      </el-card>
                    </li>
                    <li>
                      <el-card class="box-card">
                        <div class="tip_info">
                          <h4>安全合规</h4>
                          <p>持有牌照，监管合规</p>
                          <p>遵守KYC/AML标准，资金交易更安全</p>
                        </div>
                      </el-card>
                    </li>
                    <li>
                      <el-card class="box-card">
                        <div class="tip_info">
                          <h4>产品服务</h4>
                          <p>币种全面，一对一服务</p>
                          <p>选择交易币种，可实时获取报价</p>
                        </div>
                      </el-card>
                    </li>
                  </ul>
                </div>

          </div>
          </div>
          
        </div>
       
        
      </el-main>
    </el-container>
    <!-- 购买弹窗 -->
    <!-- 待付款 -->
    <el-dialog
      title="待付款"
      :visible.sync="showBuyDialog"
      width="30%"
      center>
      <div class="info_box">
        <div class="flex">
          <p class="w120">订单ID</p><p>{{SeerowData.orderid}}</p>
        </div>
        <div class="flex">
          <p class="w120">单价</p><p>{{SeerowData.price}}</p>
        </div>
        <div class="flex">
          <p class="w120">币种</p><p>{{SeerowData.coin}}</p>
        </div>
        <div class="flex">
          <p class="w120">数量</p><p>{{SeerowData.number}}</p>
        </div>
        <div class="flex">
          <p class="w120">支付链接</p><p><a :href="SeerowData.cpay" target="blank">【点击支付】</a> </p>
        </div>
        <div class="flex ">
          <p class="color-danger m-top-10">*订单已经生成，请立即完成付款</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showBuyDialog = false">取 消</el-button>
        <el-button type="primary" @click="showBuyDialog = false"><a :href="SeerowData.cpay" target="blank"> 点击付款 </a></el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { checkTradePassword } from "../../service/TradeService.js";
export default {
  data() {
    return {
      showDialog: false,
      currencyList: [{coin:'USDT'}],
      coinInfo: "",
      coinArea:'',
      buyForm: {
        number: "",
        total: ""
      },
      sellForm: {
        number: "",
        total: ""
      },
      showLoading: false,
      canTrade: false,
      bindState: null,
      myOrderList: [],
      allOrderList: [],
      bankInfo: "",
      orderStatus: 0,
      myBalance: 0,

      //随机生成的备注字符串
      noteStr: "",
      coinlist:[
        {logo:require("@/assets/images/cionLogo/btc.png"),coin:'BTC',},
        {logo:require("@/assets/images/cionLogo/xrp.png"),coin:'XRP',}
      ],
      activeName: 'first',
      formInline: {
          buyInput: '',
          sellInput: ''
        },
      typeBuyval:'', 
      typeSellval:'',
      putInfo:'CNY',
      ins:0,
      rightData:[], 
      buydisabled:true,
      selldisabled:true,
      buyOrderData:{

      },
      sellOrderData:{},
      cpayhtml:null,
      SeerowData:{},
      showBuyDialog:false,

      otcareaName:'',

        rules: {
            name: [
              { required: true, message: '请输入金额或数量', trigger: 'blur' },
              { min: 3, max: 5, message: '请输入金额或数量', trigger: 'blur' }
        ],
      },
    };
  },
          
  computed: {
    buyingLabel() {
      return `${this.$t("buy") || "买入"}&nbsp;${this.coinInfo.coinid || ""}`;
    },
    sellingLabel() {
      return `${this.$t("sell") || "卖出"}&nbsp;${this.coinInfo.coinid || ""}`;
    },
    buyState() {
      return `${this.$t("buy") || "买入"}`;
    },
    minNum() {
      return `${this.$t("minNum") || "最少"} ${this.coinInfo.minnum * 1}`;
    },
    sellState() {
      return `${this.$t("sell") || "卖出"}`;
    },
    buyTotal() {
      return this.buyForm.number * this.coinInfo.buycny;
    },
    sellTotal() {
      return this.sellForm.number * this.coinInfo.sellcny;
    },
    minTips(){
      if(this.typeBuyval==1){
        return '最少'+(this.rightData.minnum*1*this.rightData.buyprice)+'~~最多'+(this.rightData.maxnum*1)*Number(this.rightData.buyprice);
      }else{
        return '最少'+(this.rightData.minnum*1)+'~~最多'+(this.rightData.maxnum*1);
      }
    },
    minTips2(){
      if(this.typeSellval==1){
        return '最少'+(this.rightData.minnum*1*this.rightData.sellprice)+'~~最多'+(this.rightData.maxnum*1)*Number(this.rightData.sellprice);
      }else{
        return '最少'+(this.rightData.minnum*1)+'~~最多'+(this.rightData.maxnum*1);
      }
    }
  },
  watch: {
    formInline:{
      handler(val,oldVal){
        console.log("formInline.buyInput"+val.buyInput,oldVal.buyInput);
        if(this.typeBuyval==1){
          this.formInline.buyInput=val.buyInput;
          this.buyOrderData.buyprice=this.rightData.buyprice;
          this.buyOrderData.allbuyMoney=this.formInline.buyInput;
          this.buyOrderData.number=(Number(this.formInline.buyInput)/Number(this.rightData.buyprice)).toFixed(6);
        }else if(this.typeBuyval==2){
          this.buyOrderData.buyprice=this.rightData.buyprice;
          this.buyOrderData.number=Number(this.formInline.buyInput);
          this.buyOrderData.allbuyMoney=(Number(this.formInline.buyInput)*Number(this.rightData.buyprice)).toFixed(6)*1;
        }
        if(this.typeSellval==1){
          this.formInline.sellInput=val.sellInput;
          this.sellOrderData.sellprice=this.rightData.sellprice;
          this.sellOrderData.allsellMoney=this.formInline.sellInput;
          this.sellOrderData.number=(Number(this.formInline.sellInput)/Number(this.rightData.sellprice)).toFixed(6);
        }else if(this.typeSellval==2){
          this.formInline.sellInput=val.sellInput;
          this.sellOrderData.sellprice=this.rightData.sellprice;
          this.sellOrderData.allsellMoney= (Number(this.formInline.sellInput)*Number(this.rightData.sellprice)).toFixed(6)*1;
          this.sellOrderData.number= Number(this.formInline.sellInput);
        }
      },
      deep:true
    },
  },
  mounted() {
    this.typeBuyval=1;
    this.typeSellval=1;
    this.showLoading = true;
    this.getotcarea().then(coin => {
      if (coin) {
        this.getAvailable(coin);
      }
    });
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
    },
    // 切换 typeBuyval
    typeBuy(val){
      if(val===1){
        this.typeBuyval=val;
        this.onSubmitBuy(val);
      }else{
        this.typeBuyval=val;
        this.onSubmitBuy(val);
      }
    },
    // 左侧币种切换
    selectLeft(index){
      console.log(index);
      this.ins=index;
    },
    // 购买获取报价
    onSubmitBuy(){
      if(this.formInline.buyInput==''){
        return
      }else{
        console.log(this.formInline.buyInput);
        
        this.buydisabled=false;
        if(this.typeBuyval==1){
          console.log(this.formInline.buyInput);
          this.buyOrderData.buyprice=this.rightData.buyprice;
          this.buyOrderData.allbuyMoney=this.formInline.buyInput;
          this.buyOrderData.number=(Number(this.formInline.buyInput)/Number(this.rightData.buyprice)).toFixed(6);
        }else if(this.typeBuyval==2){
          this.buyOrderData.buyprice=this.rightData.buyprice;
          this.buyOrderData.number=Number(this.formInline.buyInput);
          this.buyOrderData.allbuyMoney=(Number(this.formInline.buyInput)*Number(this.rightData.buyprice)).toFixed(6)*1;
        }
      }
    },
    // sellBuyval  出售
    typeSell(val){
      if(val===1){
        this.typeSellval=val;
        this.onSubmitSell();
      }else{
        this.typeSellval=val;
        this.onSubmitSell();
      }
    },
    onSubmitSell(val){
      if(this.formInline.sellInput==''){
        this.$message.error('请输入金额或数量');
        return
      }else{
        this.selldisabled=false;
        if(this.typeSellval==1){
          this.sellOrderData.sellprice=this.rightData.sellprice;
          this.sellOrderData.allsellMoney=this.formInline.sellInput;
          this.sellOrderData.number=(Number(this.formInline.sellInput)/Number(this.rightData.sellprice)).toFixed(6);
        }else if(this.typeSellval==2){
          this.sellOrderData.sellprice=this.rightData.sellprice;
          this.sellOrderData.allsellMoney= (Number(this.formInline.sellInput)*Number(this.rightData.sellprice)).toFixed(6)*1;
          this.sellOrderData.number= Number(this.formInline.sellInput);
        }
      }
    },
    //检测交易密码有效期
    checkTradePassword22() {
      if (!this.storage.get("tradePasswordChecked")) {
        this.$prompt(this.$t("label199"), "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /\S/,
          inputType: "password",
          inputErrorMessage: this.$t("label200")
        })
          .then(({ value }) => {
            checkTradePassword(value).then(res => {
              if (res.code != 0) {
                this.storage.set("tradePasswordChecked", false);
                this.errMsg("交易密码不正确");
              } else {
                this.storage.set("tradePasswordChecked", true);
                this.successMsg(res.msg);
              }
            });
          })
          .catch(() => {});
        return false;
      }
      return true;
    },
    // 生成随机备注信息
    getNote() {
      let str = "";
      for (let i = 0; i < 6; i++) {
        str += this.Util.randomNum(0, 9);
      }
      this.noteStr = str;
    },
    //获取可用
    getAvailable(coin) {
      this.request(this.api.getdaynumber, {
        coin: coin
      }).then(res => {
        if (res.code == "0" && res.data.list && res.data.list.length > 0) {
          this.myBalance = res.data.list[0].usable * 1;
        }
      });
    },
    //系统银行信息
    getotcbank() {
      this.request(this.api.getotcbank).then(res => {
        if (res.code == "0") {
          this.bankInfo = res.data.list[0] || "";
        } else {
          this.errMsg(res.msg || "操作失败");
        }
      });
    },
    // otc币种
    getotcarea() {
      return this.request(this.api.getotcarea).then(res => {
        console.log(`OTC币种${JSON.stringify(res)}`);
        if (res.code == "0" && res.data  && res.data[0]) {
          this.currencyList = res.data;
          this.coinArea=res.data[0].areaid;
          this.otcareaName=res.data[0].coin;
          // return Promise.resolve(this.coinInfo.coinid);
          return this.getotccoin(this.coinArea)
        }
      });
    },
    getotccoin(area){
      return this.request(this.api.getotccoin,{area:area}).then(res => {
        console.log(`OTC币种列表${JSON.stringify(res)}`);
        if (res.code == "0" && res.data  && res.data[0]) {
          this.coinlist = res.data;
          this.rightData=res.data[0];
          // this.coinInfo = res.data[0];
          // return Promise.resolve(this.coinInfo.coinid);
        }
      });
    },
    // 获取所有otc订单记录
    getOtcOrder() {
      this.request(this.api.getotcorder).then(res => {
        console.log(`OTC订单${JSON.stringify(res)}`);
        this.showLoading = false;
        if (res.code == "0" && res.data && res.data.list && res.data.list[0]) {
          let list = res.data.list.slice(0);
          this.allOrderList = list;
          this.myOrderList = this.getMyOrderlist(
            list,
            this.coinInfo.coinid || list[0].coinid
          );
        }
      });
    },
    getMyOrderlist(listArr, coinid) {
      let arr = [];
      if (listArr && this.Util.dataType(listArr) == "array") {
        listArr.map(item => {
          if (item.coinid == coinid) {
            arr.push(item);
          }
        });
        return arr;
      }
    },
    // 获取状态
    getState() {
      this.request(this.api.saftyState).then(res => {
        if (res.code == "0") {
          this.bindState = res.data.list[0];
          this.canTrade = this.canTradeCheck(this.bindState);
        }
      });
    },
    onListClick(data) {
      this.coinInfo = data;
      this.myOrderList = this.getMyOrderlist(this.allOrderList, data.coinid);
      this.getAvailable(data.coinid);
      this.buyForm = {
        number: "",
        total: ""
      };
      this.sellForm = {
        number: "",
        total: ""
      };
    },
    // 是否能够交易
    canTradeCheck(statesObj) {
      if (
        statesObj.tradstate > 0 &&
        statesObj.bankstate > 0 &&
        statesObj.idcardstate > 0 &&
        statesObj.googlestate > 0
      ) {
        return true;
      } else {
        return false;
      }
    },
    beforeTrade() {
      if (!this.userModel.isLogin) {
        this.errMsg("label120" || "请登录后操作");
        return false;
      }
      // if (!this.checkTradePassword()) {
      //   return false;
      // }
      return true;
    },
    // 获取订单备注
    showOrderDetail(data) {
      if (data.type == 0) {
        this.orderStatus = data.state;
        this.showDialog = true;
        this.bankInfo.amount = data.zj;
        this.getNote();
      }
    },
    handleConfirm(api, param) {
      if (!checkTradePassword()) {
        return false;
      }
      return this.request(api, {
        coin: param.coin,
        id: this.bankInfo.autoid,
        bz: this.noteStr,
        number: param.number,
        jz: param.total,
        showLoading: true
      }).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg);
          this.getOtcOrder();
          return Promise.resolve(res);
        } else {
          this.errMsg(res.msg);
          return Promise.reject(res);
        }
      });
    },
    //卖出操作
    otcsellBtn() {
      if (!this.beforeTrade()) {
        return false;
      }
      this.sellForm.number=this.sellOrderData.number;
      if (
        isNaN(this.sellForm.number) ||
        this.sellForm.number < this.coinInfo.minnum * 1
      ) {
        this.errMsg("label122" || "请输入正确的数量");
        return false;
      }
      this.$confirm('确定进行OTC订单出售交易吗?, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.openSellPassWord();
          return
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      
    },
    // 买入操作
    otcbuyBtn(){
      if (!this.beforeTrade()) {
        return false;
      }
      this.buyForm.number=this.buyOrderData.number;
      if (
        isNaN(this.buyForm.number) ||
        this.buyForm.number < this.coinInfo.minnum * 1
      ) {
        this.errMsg("label122" || "请输入正确的数量");
        return false;
      }
      this.$confirm('确定进行OTC订单交易吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // otc买入
          this.open3();
          return
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
      });
    },
    open3() {
        this.$prompt('请输入交易密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType:'password',
          inputPattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/,
          inputErrorMessage: '交易密码格式不正确'
        }).then(({ value }) => {
          // console.log('你输入的是'+value); 
          this.request(this.api.otcbuy, {
            coin: this.rightData.coin,
            number: this.buyForm.number,
            area: this.coinArea,
            tradpassword:value,
          }).then(res => {
              if (res.code == "0") {
                this.showBuyDialog = true;
                this.SeerowData={
                  orderid:res.data[0].orderid,
                  cpay:res.data[0].cpay,
                  number: this.buyForm.number,
                  coin: this.rightData.coin,
                  price:this.rightData.buyprice,
                }
              }else if(res.code=='4505'){
                this.errMsg("label137" || "请先完成实名认证");
                this.navigateTo("/personalCenter/identify/");
              }else{
                this.errMsg(res.msg);
              }
            })
            .catch(err => {
              console.log(err);
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    openSellPassWord() {
        this.$prompt('请输入交易密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType:'password',
          inputPattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/,
          inputErrorMessage: '交易密码格式不正确'
        }).then(({ value }) => {
          // console.log('你输入的是'+value); 
          this.request(this.api.otcsell, {
            coin: this.rightData.coin,
            number: this.sellForm.number,
            area: this.coinArea,
            tradpassword:value,
          }).then(res => {
              if(res.code=='0'){
                this.$message({message: res.msg,type: 'success'});
              }else{
                this.$message.error(res.msg);
                return;
              }
            })
            .catch(err => {
              console.log(res.msg);
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    buyHandle22() {
      this.getNote();
      if (!this.beforeTrade()) {
        return false;
      }
      this.buyForm.number=this.buyOrderData.number;
      if (
        isNaN(this.buyForm.number) ||
        this.buyForm.number < this.coinInfo.minnum * 1
      ) {
        this.errMsg("label122" || "请输入正确的数量");
        return false;
      }
      this.handleConfirm(this.api.otcbuy, {
        coin: this.coinInfo.coinid,
        number: this.buyForm.number,
        total: this.buyTotal
      })
        .then(res => {
          if (res.code == "0") {
            this.showDialog = true;
            this.bankInfo.amount = this.buyTotal;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    dialogClose() {
      this.showDialog = false;
    },
    

  }
};
</script>
<style lang="scss" scoped>
.break-line {
  @include breakLine;
}
$mr: 11px;
$border: 1px solid #e5e5e5;
.row {
  @include textVcenter();
  span {
    display: block;
    box-sizing: border-box;
  }
  .span-lf {
    flex: 4;
    padding-right: 15px;
    text-align: right;
  }

  .span-rt {
    flex: 5;
    padding-left: 15px;
  }
}
.container {
  min-height: calc(100% - 294px);
  padding: 30px 0;
  width: 77%;
  margin: 0 auto;
  .el-main {
    padding-top: 0;
  }
}
.el-container {
  .form-wrap {
    width: 48.65%;
    .break-line {
      margin-top: 12px;
    }
    .total {
      margin-top: 19px;
    }
    button {
      margin-top: 22px;
    }
    .account {
      margin-top: 14px;
      a {
        color: $color-danger;
      }
    }
    .input-group {
      margin-top: 19px;
      .unit {
        line-height: 40px;
        color: #333;
        padding-right: 6px;
      }
      .el-input {
        margin-top: 10px;
      }
      .hint {
        display: inline-block;
        margin-top: $mr;
      }
    }
  }
  .warning-box {
    border: $default-border;
    padding: 20px;
    margin-top: 20px;
    h3 {
      line-height: 2;
    }
    span {
      line-height: 1.5;
    }
  }
}
.panel-container {
  .panel-header {
    margin: 30px 0 12px 0;
  }
}
.top_title{
  color: $w-txtcor;padding:30px 0;
  h3{font-size: 24px;}
  p{font-size: 13px;color: #9aa5b5;}
  .pright{line-height: 24px;margin-left: 12px;}
}
.main-container{min-height: 80vh;}
// 内容部分
.main_cont{margin-top: 30px;}
.top_coin{
  border-top: 1px solid #e6ecf2;border-bottom:1px solid #e6ecf2;
  li{color: $w-txtcor;width: 100px;text-align: center;cursor: pointer;padding:15px 0;}
  li:nth-child(1){border-right: 1px solid #e6ecf2;}
  span{padding:15px 0;}
  button{border: none;padding: 0;}
  .active{border-bottom: 1px solid $txt-pbold;}
}
.main_leftbox{
  width: 15%;min-width: 150px;
}
.coin_list{
  margin-top: 30px;border-right:1px solid #e6ecf2;
  .coin_ul{
    .active{
      background-image:linear-gradient(270deg,#fff,#e6ecf2 76%);
      border-right: 2px solid #357ce1;
      color: #357ce1;
    }
    img{width: 30px;height: 30px;border-radius: 50%}
    .m-left-30{margin-left: 30px;}
    h2{line-height: 40px;color: #6e6e6e;}
    li{margin-bottom: 0px;padding:15px 12px;cursor: pointer;height: 30px;}
    li:hover{color: #357ce1;background: #e6ecf2;}
  }
}
// 右侧
.main_rightbox{
  width: 82%;margin-left: 100px;border-radius: 6px;
  .main-righttop{box-shadow: 0 0 20px 0 rgba(28,36,44,.12);}
  .box_item{
    border-radius: 8px;
    padding: 8px 0 0px 25px;
  }
  .input_box{
      margin: 30px 0;
      .active{color: #1c242c}
      p{color: #707070;padding: 5px  20px 5px 0;cursor: pointer;}
      p:nth-child(2){border-left: 1px solid #6e6e6e;padding-left: 20px;}
  }
  .input_two {
    margin: 15px 0;
  }
  .buysell_main{margin-top: 0px;}

}

.buysell_main{
  background: rgba(229,235,245,.3);padding:15px;
  .title{color:#1c242c;padding: 10px 0;}
  img{width: 50px;height: 50px;border-radius: 50%}
  .price{
    width: 450px;
    .coinprice{color: $txt-pbold}
    i{color: $color-primary}
    .paymoney{color: $txt-bluea;line-height: 30px;}
  }
  .buysellbox{margin-top: 15px;}
}
.tipsbox{
  margin-top: 80px;
  h4{color:  #1c242c;line-height: 30px;}
  p{line-height: 20px;font-size: 12px;color: #9aa5b5;}
  li{margin-right: 35px;border-bottom: 3px solid #e5ebf5;width: 30%;
    .el-card{background: rgba(229,235,245,.3);}
  }
}

.info_box{
  div{margin: 15px 0;}
  .w120{width: 120px;}
  a{color: red;}
}
.color-danger {
      color: $color-danger;
    }
</style>
